<script setup>
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import {createDiscreteApi} from "naive-ui";
import {updatePwdAPI} from '@/api/user.js'
import {useTokenStore} from '@/stores/token'

const {message} = createDiscreteApi(
    ["message", 'dialog', 'notification', 'loadingBar', 'modal']
)

const formRef = ref()
const router = useRouter()
const tokenStore = useTokenStore()
const updatePwdForm = ref({
  phone: '',
  oldPwd: '',
  newPwd: '',
  rePwd: ''
})
// 数据校验
const phoneValidate = (rule,value,callback)=>{
  const reg = /^1[1-9]\d{9}$/
  if(!reg.test(value)){
    callback(new Error("请输入正确格式的手机号"))
  }else{
    callback()
  }
}
const newPwdValidate = (rule,value,callback)=>{
  if(value==updatePwdForm.value.oldPwd){
    callback(new Error('新密码不能与原密码一致'))
  }else{
    callback()
  }
}
const rePwdValidate = (rule,value,callback)=>{
  if(value != updatePwdForm.value.newPwd){
    callback(new Error("确认密码与新密码不一致"))
  }else{
    callback()
  }
}
const rules = ref({
  phone:[
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {validator: phoneValidate, trigger:'blur'}
  ],
  oldPwd:[
    {required: true, message: '请输入原密码', trigger: 'blur'}
  ],
  newPwd:[
    {required: true, message: '请输入新密码', trigger: 'blur'},
    { min: 6, max: 13, message: '密码长度必须在6-13位之间', trigger: 'blur' },
    {validator: newPwdValidate, trigger: 'blur'}
  ],
  rePwd:[
    {required: true, message: '请输入确认密码', trigger: 'blur'},
    { min: 6, max: 13, message: '密码长度必须在6-13位之间', trigger: 'blur' },
    {validator: rePwdValidate, trigger:'blur'}
  ],
})

// 修改密码
const dialogVisible = ref(false)
const updatePwdBtn = ()=>{
  formRef.value.validate((valid) => {
    if (valid) {
      dialogVisible.value=true
    } else {
      message.warning("提交信息有误，请检查")
    }
  })
  
}
const updatePwd = async()=>{
  let res = await updatePwdAPI(updatePwdForm.value)
  console.log(res);
  if(res.code){
    message.success("修改成功，请重新登录")
    tokenStore.removeToken()
    router.push('/login')
  }
  dialogVisible.value=false
}
const closeDialog = ()=>{
  updatePwdForm.value.phone = '',
  updatePwdForm.value.oldPwd = '',
  updatePwdForm.value.newPwd = '',
  updatePwdForm.value.rePwd = ''
}


</script>

<template>
  <el-form
    ref="formRef"
    class="formCom"
    label-position="top"
    label-width="auto"
    :model="updatePwdForm"
    :rules="rules"
    style="max-width: 600px"
  >
    <el-form-item label="手机号" prop="phone" class="phone">
      <el-input v-model="updatePwdForm.phone" />
    </el-form-item>
    <el-form-item label="原密码" prop="oldPwd">
      <el-input v-model="updatePwdForm.oldPwd" show-password/>
    </el-form-item>
    <el-form-item label="新密码" prop="newPwd">
      <el-input v-model="updatePwdForm.newPwd" show-password/>
    </el-form-item>
    <el-form-item label="确认密码" prop="rePwd">
      <el-input v-model="updatePwdForm.rePwd" show-password/>
    </el-form-item>
    <el-button type="primary" @click="updatePwdBtn" plain >确定</el-button>
  </el-form>
  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="400"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <span>修改后需重新登录，请问是否确定修改密码？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancelBtn">取消</el-button>
        <el-button type="primary" @click="updatePwd" color="rgba(24,160,88,0.22)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.formCom{
  .el-form-item{
    margin-bottom: 15px;
    .el-input{
      width: 300px;
    }
  }
  .phone{
    .el-input{
      width: 200px;
    }
  }
  .el-button{
    margin: 20px 0 0 200px;
    width: 100px;
    background-color: @mainBackgroundLow;
    &:hover{
      background-color: @mainBackground;
    }
  }
}
.dialog-footer{
  .cancelBtn{
    &:hover{
      background-color: @mainBackgroundLow;
    }
  }
}
.el-button{
  width: 80px;
  color: @mainColor;
}
</style>